<template>
  <a-popover  :open="visible" trigger="click">
    <template #title>
      <div class="flex flex-row">
        <div class="flex-shrink-0">标题</div>
        <div class="flex-1 w-0 text-center">中间部分</div>
        <div class="flex-shrink-0" @click="hide">关闭</div>
      </div>
    </template>
    <template #content>
      <p>Content</p>
      <p>Content</p>
    </template>
    <a-button type="primary" @click="onShow">点我</a-button>
  </a-popover>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const visible = ref(false)
function hide(){
  visible.value = false
}
function onShow(){
  visible.value = true
}
</script>

<style scoped></style>
